@import url("./reset.css");
@import url("./var.less");
@import url("./media.less");

/****** 标签 ******/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-size: @fsLevel1;
  font-weight: 400;
  line-height: 1;
}
h2 {
  font-size: @fsLevel2;
  font-weight: 400;
  line-height: 1;
}
h3 {
  font-size: @fsLevel3;
  font-weight: 400;
  line-height: 1;
}
h4 {
  font-size: @fsLevel4;
  font-weight: 400;
  line-height: 1;
}
h5 {
  font-size: @fsLevel5;
  font-weight: 400;
  line-height: 1;
}
h6 {
  font-size: @fsLevel6;
  font-weight: 400;
  line-height: 1;
}

button {
  cursor: pointer;
  padding: @normal @normal * 1.5;
  min-width: @normal * 15;
  color: #fff;
  border: 1px solid @basicColor;
  background-color: transparent;
  border-radius: @borderRdius;
  transition: all 0.3s;
  a {
    color: #fff;
  }
  &.round {
    border-radius: @normal * 2;
  }
  &.link {
    border: 0;
    border-radius: 0;
    color: @themePrimary;
    font-weight: 700;
    text-decoration: underline;
  }
  &.primary {
    color: #fff;
    border-color: @themePrimary;
    background-color: @themePrimary;
    &:hover {
      box-shadow: 0 0 3px 1px #504e4e;
    }
  }
  &.gray {
    border-color: @gray;
    a {
      color: @gray;
    }
    &:hover {
      border-color: @black;
      box-shadow: 0 0 3px 1px #504e4e;
    }
  }
}

/****** 块级样式 ******/
.block {
  width: 100%;
  display: block;
}
.ib {
  display: inline-block;
}
.text-center {
  text-align: center;
}

/****** 外边距和内边距 ******/
.m-auto {
  margin: auto;
}
.margin {
  margin: @normal;
}
.margin-top {
  margin-top: @normal;
}
.margin-top-middle {
  margin-top: @normal * 2;
}
.margin-top-hight {
  margin-top: @normal * 4;
}
.margin-top-hh {
  margin-top: @normal * 10;
}
.margin-right {
  margin-right: @normal;
}
.margin-right-middle {
  margin-right: @normal * 2;
}
.margin-right-hight {
  margin-right: @normal * 4;
}
.margin-bottom {
  margin-bottom: @normal;
}
.margin-bottom-middle {
  margin-bottom: @normal * 2;
}
.margin-bottom-hight {
  margin-bottom: @normal * 4;
}
.margin-left {
  margin-left: @normal;
}
.margin-left-middle {
  margin-left: @normal * 2;
}
.margin-left-hight {
  margin-left: @normal * 4;
}
.padding {
  padding: @pre-padding;
}
.padding-top-hight {
  padding-top: @normal * 4;
}

/****** 常用盒子布局 ******/
.flex-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-sc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex-ec {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-column-cc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-column-sc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.flex-column-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 背景颜色 */
.bg-white {
  color: #000;
  background-color: #fff;
}
.bg-black {
  color: #fff;
  background-color: #000;
}
.bg-gray {
  color: #fff;
  background-color: #ccc;
}

/* 文字颜色 */
.black {
  color: @black;
}
.blue {
  color: @themePrimary;
}
.gray {
  color: #666;
}
.link {
  color: @themePrimary;
  cursor: pointer;
}

/* 文字大写 */
.fsLevel1 {
  font-size: @fsLevel1;
  line-height: 1;
  font-weight: 400;
}
.fsLevel2 {
  font-size: @fsLevel2;
  line-height: 1;
  font-weight: 400;
}
.fsLevel3 {
  font-size: @fsLevel3;
  line-height: 1;
  font-weight: 400;
}
.fsLevel4 {
  font-size: @fsLevel4;
  line-height: 1;
  font-weight: 400;
}
.fsLevel5 {
  font-size: @fsLevel5;
  line-height: 1;
  font-weight: 400;
}
.fsLevel6 {
  font-size: @fsLevel6;
  line-height: 1;
  font-weight: 400;
}

/****** 常用宽/高 ******/
.width {
  width: @contentW;
}
.width-screen {
  width: 100vw;
}
.h-screen {
  position: relative;
  height: 100vh;
}
.min-h-screen {
  position: relative;
  min-height: 100vh;
}
.h-middle {
  position: relative;
  min-height: 50rem;
}

/* 盒子 */
.empty-box {
  width: 100%;
  min-height: 30rem;
  border: 1px solid #ddd;
}
.sec-box {
  &.fixed-top {
    margin-top: -@headerH;
  }
}

// 盒子
.card-box {
  display: flex;
  margin: -@normal;
  .card-item {
    overflow: hidden;
    flex: 1;
    position: relative;
    margin: @normal;
    &.auto {
      flex: none;
    }
  }
}

.applications-home {
  h1 {
    word-break: auto-phrase;
    font-size: 3rem;
  }
  h2 {
    word-break: auto-phrase;
  }
  span,
  p {
    font-size: 1.6rem;
  }
  & > article {
    max-width: @contentW;
  }
  & > div {
    flex: 1;
    width: 100%;
    & > article {
      max-width: @contentW;
    }
  }
  &.fixed-top div:first-child {
    padding-top: @normal * 2;
  }
  .link {
    display: inline-block;
    padding: @normal;
    font-size: @fsLevel5;
    text-decoration: underline;
    transition: all 0.3s;
    &:hover {
      transform: scale(1.2);
    }
  }
}

.applications-card-ul {
  margin: auto;
  max-width: 80%;
  .nbn,
  .bn {
    margin: 0 @pre-padding;
    flex: 1;
    .card-item {
      & > article {
        display: flex;
        justify-content: center;
        padding: 10%;
        height: 100%;
        border: 1px solid @borderColor;
        border-radius: 10%;
      }
      &.auto {
        width: 25%;
        & > article {
          flex-direction: column;
          justify-content: flex-start;
          font-size: @fsLevel5;
        }
      }
    }
    p {
      font-size: @fsLevel5;
    }
  }
  .bn {
    .card-item.auto {
      width: 40%;
    }
  }
}
